/*
 * Copyright (c) 2007-2020 西安交通信息投资营运有限公司 版权所有
 * 作者:李蕊
 */

import React, {FC, useCallback, useMemo} from 'react';
import {ProColumns} from "@ant-design/pro-table/lib/Table";
import service from './service';
import {LockUserModel} from './data';
import ProTableCrud, {ProTableCrudOperate} from '@/components/ProTableCrud';
import useList, {ListOperate} from '@/hooks/useList';
import useDelete from '@/hooks/useDelete';
import {Button} from "antd";
import {hasPermission} from "@/utils/utils";
import config from "@/config";


/** 锁定用户模块 */
const LockUserPage: FC = () => {

  //List
  const listOperate = useList<LockUserModel>({
    onLoad: (params) => service.selectList(params),
    onExport: (params) => service.export(params),
  });

  // //Edit
  // const editOperate = useEdit<LockUserModel>({
  //  // onEdit: (record) => service.selectById(record.id),
  //   onSubmit: (_isCreate, _, record) => (_isCreate ? service.insert(record) : service.update(record)),
  //   onSubmitSucess: listOperate.handleReload,
  // });

  //Delete
  const deleteOperate = useDelete<LockUserModel>({
    onDelete: (ids, _) => service.delete(ids.join()),
    onDeleteSucess: listOperate.handleReload,
  });

  const searchOptionRender = useCallback(({searchText, resetText}, {form}) => {
    return (
      <>
        <Button type="primary" htmlType="submit" onClick={() => form.submit()}>
          <i className='fal fa-search'/> {searchText}
        </Button>
      </>
    );
  }, [listOperate]);

  //表格列
  const cols = useMemo(() => getCols(listOperate), []);

  //增删改查选项
  const tableOperate: ProTableCrudOperate<LockUserModel> = {
    cols,
    listOperate,
    //editOperate,
    deleteOperate,
    //showOptionColumn: false,
    //showDetails: false,
    showEdit: false,
    showExport: false,
    // showDetails: hasPermission(config.permission.syslockUser.select),
    showDelete: hasPermission(config.permission.syslockUser.remove),
    showCreate: false,
    showDetails: false,
    // getEditElement: (props) => (<Edit {...props}/>),
    //getDetailsElement: (props) => (<Details {...props}/>),
  };

  return (
    <ProTableCrud headerTitle="锁定用户列表" rowKey="account" operate={tableOperate}
                  pagination={false} search={{optionRender: searchOptionRender,}}/>

  );
};

/** 获取表格列 */
function getCols(listOperate: ListOperate<LockUserModel>): (ProColumns<LockUserModel>[]) {
  return [
    {
      title: '账户',
      dataIndex: 'account',
      hideInTable: false,
      hideInSearch: false,
      ellipsis: false,
      sorter: false,
      filters: undefined,
      align: 'center',
      width: 200,
      formItemProps: {
        'placeholder': '请输入账户',
      },
    },
    {
      title: '登录时间',
      dataIndex: 'loginTime',
      hideInTable: false,
      hideInSearch: true,
      ellipsis: false,
      sorter: false,
      filters: undefined,
      align: 'center',
      width: 200,
      formItemProps: {
        'placeholder': '请输入登录时间',
      },
    },
    {
      title: '解锁时间',
      dataIndex: 'disLockTime',
      hideInTable: false,
      hideInSearch: true,
      ellipsis: false,
      sorter: false,
      filters: undefined,
      align: 'center',
      width: 200,
      formItemProps: {
        'placeholder': '请输入解锁时间',
      },
    },
    {
      title: '错误次数',
      dataIndex: 'count',
      hideInTable: false,
      hideInSearch: true,
      ellipsis: false,
      sorter: false,
      filters: undefined,
      align: 'center',
      width: 180,
      formItemProps: {
        'placeholder': '请输入错误次数',
      },
    },

  ]
}

export default LockUserPage;

